@keyframes loadingMove{
    0%{
        transform: scaleY(1);
    }
    50%{
        transform: scaleY(0.2);
    }
    100%{
        transform: scaleY(1);
    }
}
@keyframes arrowMove {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    50% {
        opacity: 1;
        transform: translate(0, -0.36rem);
    }
    100% {
        opacity: 0;
        transform: translate(0, -0.60rem);
    }
}
 @-webkit-keyframes arrowMove {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, 0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate(0, -0.36rem);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -0.60rem);
    }
}
@keyframes musicMove {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes musicMove {
    0% {
        -webkit-transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
body,html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.wrapper{
    width: 100%;
    overflow: hidden;
    position: relative;
    #loading{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: #FFFFFF;
        z-index: 20;
        ul{
            position: absolute;
            left: 50%;
            top:40%;
            width:0.9rem; 
            margin-left: -0.45rem;
            li{
                width: 0.05rem;
                height: 0.4rem;
                margin-right: 0.1rem;
                background: #0F0;
                float: left;
                animation: loadingMove 2s linear infinite;
                
            }
            li:nth-of-type(1){
                animation-delay: -0s;
            }
            li:nth-of-type(2){
                animation-delay: -0.2s;
            } 
            li:nth-of-type(3){
                animation-delay: -0.4s;
            } 
            li:nth-of-type(4){
                animation-delay: -0.6s;
            } 
            li:nth-of-type(5){
                animation-delay: -0.8s;
            } 
            li:nth-of-type(6){
                animation-delay: -1s;
            }               
        }
        div{
            font-size: 0.3rem;
            color: #0F0;
            width: 100%;
            text-align: center;
            top: 50%;
            position: absolute;
        } 
           
    }   
    #c1 {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
    }
    div#uList{
       width: 100%;
       height: 100%;
       z-index: 5;
       #list{
        &>div{
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            z-index: 5;           
        }
        & > div#page1 {
            background-image: url(../img/b.png); 
            ul#s1{
                position: absolute;
                left: 20%;
                top:65%;
                font-size:0.3rem; 
                color: #FFFFFF;  
                display: none;                           
            }      
        }
        
        & > div#page2 {
            background-image: url(../img/c.png);
            #s2 li {
                width: 1rem;
                height: 1rem;
                position: absolute;
                margin-left: -0.45rem;
                img{
                    width: 100%;
                    height: 100%;
                    display: block;
                }
                
            }
            
            #s2 li:nth-of-type(1) {
                left: 50%;
                top: 30%;
            }
            
            #s2 li:nth-of-type(2) {
                left: 20%;
                top: 40%;
            }
            
            #s2 li:nth-of-type(3) {
                left: 80%;
                top: 40%;
            }
            
            #s2 li:nth-of-type(4) {
                left: 20%;
                top: 60%;
            }
            
            #s2 li:nth-of-type(5) {
                left: 80%;
                top: 60%;
            }
            
            #s2 li:nth-of-type(6) {
                left: 50%;
                top: 75%;
            }
        }
        
        & > div#page3 {
            background-image: url(../img/d.png);
            div#s3{
                width: 4.6rem;
                height: 2.64rem;
                background: url(../img/d1.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: 18%;
                bottom: 20%;
            };
        }
        
        & > div#page4 {
            background-image: url(../img/e.png);
            li{
                color: #FFFFFF;
                font-size: 0.22rem;
                border: 2px #FFF solid;
                border-radius: 0.05rem;
                box-shadow: 0 0 0.15rem #FFF;
                word-wrap: break-word;
                position: absolute;
                overflow: hidden;
                padding: 0.05rem;
                box-sizing: border-box; 
            }
            li:nth-of-type(1) {
                width: 2.0rem;
                height: 2.5rem;
                left: 4%;
                top: 14%;
            }
            
            li:nth-of-type(2) {
                width: 2.8rem;
                height: 1.6rem;
                left: 50%;
                top: 18%
            }
            
            li:nth-of-type(3) {
                width: 1.1rem;
                height: 2.9rem;
                left: 76%;
                top: 39%;
            }
        }
        
        & > div#page5 {
            background-image: url(../img/ad1.png);
        }
        
        & > div#page6 {
            background-image: url(../img/ad2.png);
        }
        
        & > div#page7 {
            background-image: url(../img/ad3.png);
        }
        
        & > div#page8 {
            background-image: url(../img/ad4.png);
        }
     } 
    }
   
    #arrow {
        width: 0.9rem;
        height: 0.62rem;
        background: url(../img/arr.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        bottom: 0.18rem;
        margin-left: -0.45rem;
        z-index: 20;
        animation: 1s infinite arrowMove;
        -webkit-animation: 1s infinite arrowMove;
    }
    #music {
        width: 0.86rem;
        height: 0.86rem;
        background: url(../img/music.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0.24rem;
        right: 0.3rem;
        z-index: 8;
    }
    #music.active {
        animation: 1s linear infinite musicMove;
        -webkit-animation: 1s linear infinite musicMove;
    }
}

.swiper-slide{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
